<div class="w-full flex-col h-full">
  <div class="w-full h-full flex-1">
    <ui-section expand class="w-full">
      <div slot="header">Excel转Json</div>
      <ui-prop class="w-full prop">
        <div class="flex">
          <ui-label slot="label" class="w-100">Excel路径：</ui-label>
          <ui-input
            slot="content"
            class="flex-1"
            v-bind:value="excelPath"
            type="string"
            readonly
          >
          </ui-input>
          <ui-button class="green" @click="onSelectExcelPath">选择</ui-button>
          <ui-button class="blue mr-10" @click="onOpenExcelPath"
            >打开</ui-button
          >
        </div>
      </ui-prop>
      <ui-prop class="w-full prop">
        <div class="flex">
          <ui-label slot="label" class="w-100">Json导出路径：</ui-label>
          <ui-input
            slot="content"
            class="flex-1"
            v-model="jsonOutPath"
            type="string"
            readonly
          >
          </ui-input>
          <ui-button class="green" @click="onSelectJsonOutPath">选择</ui-button>
          <ui-button class="blue mr-10" @click="onOpenJsonOutPath"
            >打开</ui-button
          >
        </div>
      </ui-prop>
      <ui-prop class="w-full prop">
        <div class="flex">
          <ui-label slot="label" class="w-100">Ts导出路径：</ui-label>
          <ui-input
            slot="content"
            class="flex-1"
            v-model="tsOutPath"
            type="string"
            readonly
          >
          </ui-input>
          <ui-button class="green" @click="onSelectTsOutPath">选择</ui-button>
          <ui-button class="blue mr-10" @click="onOpenTsOutPath"
            >打开</ui-button
          >
        </div>
      </ui-prop>
      <div class="group g-02 row">
        <ui-checkbox
          indent="1"
          v-model="isPrettier"
          @change="onPrettierCheckBox"
          >是否美化</ui-checkbox
        >
      </div>
    </ui-section>
    <hr />
    <ui-section expand>
      <div slot="header">客户端</div>
      <div class="group g-02 row">
        <ui-checkbox
          indent="1"
          v-model="isExportClientCheckBox"
          @change="onExportClientCheckBox"
          >是否导出客户端</ui-checkbox
        >
      </div>
    </ui-section>
    <hr />
    <ui-section expand>
      <div slot="header">服务端</div>
      <div class="group g-02 row">
        <ui-checkbox
          indent="1"
          v-model="isExportServerCheckBox"
          @change="onExportServerCheckBox"
          >是否导出服务端</ui-checkbox
        >
      </div>
    </ui-section>
  </div>
  <div class="layout vertical w-full">
    <div class="w-full flex flex-end" style="padding-bottom: 2px">
      <ui-button class="red" @click="onGenerate">生成</ui-button>
      <ui-button class="red" @click="cleanLog">清除日志</ui-button>
    </div>
    <div>
      <textarea
        class="log flex-1 focus-none"
        ref="logTextArea"
        id="logTextArea"
        style="resize: none"
        readonly
      >
{{log}}</textarea
      >
    </div>
  </div>
</div>
